<template>
    <div class="configuredRule">
        <el-card shadow="hover" class="card-search">
            <el-row>
                <el-col :span="20">
                    <div class="search_detail">
                        <div class="search">
                            <span class="span_name">有效时长：</span>
                            <el-select v-model="state.params.effectiveDuration" placeholder="请选择">
                                <el-option v-for="item in state.options" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </div>
                        <div class="search">
                            <span class="span_name">时间：</span>
                            <el-date-picker v-model="state.params.time" type="daterange" range-separator="~"
                                value-format="YYYY-MM-DD" start-placeholder="开始时间" end-placeholder="结束时间" />
                        </div>
                    </div>
                </el-col>
                <el-col :span="4">
                    <el-button type="primary" :icon="Search" @click="search">搜索</el-button>
                    <el-button type="danger" :icon="Delete" @click="reast">重置</el-button>
                </el-col>
            </el-row>
        </el-card>
        <el-card shadow="hover" class="card-main">
            <el-button type="primary" @click="addDialog">添加套餐</el-button>
            <el-table :data="state.tableData" stripe style="width: 100%">
                <el-table-column type="index" width="55" label="序号" />
                <el-table-column prop="speed" label="速率" width="120">
                    <template #default="scope">
                        {{ scope.row.speed }}m/s
                    </template>
                </el-table-column>
                <el-table-column prop="effectiveDuration" label="有效时长" show-overflow-tooltip>
                    <template #default="scope">
                        <span v-if="scope.row.effectiveDuration == 1">一个月</span>
                        <span v-if="scope.row.effectiveDuration == 3">三个月</span>
                        <span v-if="scope.row.effectiveDuration == 6">六个月</span>
                        <span v-if="scope.row.effectiveDuration == 12">十二个月</span>
                    </template>
                </el-table-column>
                <el-table-column prop="productVersion" label="版本" show-overflow-tooltip />
                <el-table-column prop="price" label="价格">
                    <template #default="scope">
                        {{ scope.row.price }}￥
                    </template>
                </el-table-column>
                <el-table-column prop="content" label="详细介绍" show-overflow-tooltip />
                <el-table-column prop="discountContent" label="折扣介绍" show-overflow-tooltip />
                <el-table-column prop="updateTime" label="时间" show-overflow-tooltip />
                <el-table-column prop="businessName" label="门店" show-overflow-tooltip></el-table-column>

                <el-table-column label="操作" align="center" fixed="right" width="300px">
                    <template #default="scope">
                        <el-button type="primary" size="small" @click="update(scope.row)">修改</el-button>
                        <el-button type="danger" size="small" @click="deleteRow(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination background layout="prev, pager, next" :total="state.totalCount"
                    @current-change="handleCurrentChange" />
            </div>
        </el-card>
        <el-dialog v-model="dialogAdd" title="添加套餐" width="30%" :before-close="handleClose">
            <el-form :model="dialogFormVisibleForm" label-width="120px">

                <el-form-item label="速率:" :label-width="formLabelWidth">
                    <el-input v-model="dialogFormVisibleForm.speed" style="width: 214px;" placeholder="请输入速率"></el-input>
                </el-form-item>
                <el-form-item label="版本:" :label-width="formLabelWidth">
                    <el-input v-model="dialogFormVisibleForm.productVersion" style="width: 214px;"
                        placeholder="请输入版本"></el-input>
                </el-form-item>
                <el-form-item label="有效时长:" :label-width="formLabelWidth">
                    <el-select v-model="dialogFormVisibleForm.effectiveDuration" placeholder="请选择时长">
                        <el-option v-for="(item, index) in optionsTime" :key="index" :label="item.name"
                            :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="价格:" :label-width="formLabelWidth">
                    <el-input v-model="dialogFormVisibleForm.price" style="width: 214px;" placeholder="请输入价格"></el-input>
                </el-form-item>
                <el-form-item label="详细介绍:" :label-width="formLabelWidth">
                    <el-input v-model="dialogFormVisibleForm.content" style="width: 214px;"
                        placeholder="请输入详细介绍"></el-input>
                </el-form-item>
                <el-form-item label="折扣介绍:" :label-width="formLabelWidth">
                    <el-input v-model="dialogFormVisibleForm.discountContent" style="width: 214px;"
                        placeholder="请输入折扣介绍"></el-input>
                </el-form-item>
                <el-form-item label="关联门店:" :label-width="formLabelWidth">
                    <el-select v-model="dialogFormVisibleForm.businessId" placeholder="请选择门店">
                        <el-option v-for="(item, index) in optionsMd" :key="index" :label="item.businessName"
                            :value="item.id" />
                    </el-select>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogAdd = false">取消</el-button>
                    <el-button type="primary" @click="addList">
                        确定
                    </el-button>
                </span>
            </template>
        </el-dialog>
        <el-dialog v-model="dialogUpdata" title="修改套餐" width="30%" :before-close="handleClose">
            <el-form :model="dialogFormVisibleForm" label-width="120px">

                <el-form-item label="速率:" :label-width="formLabelWidth">
                    <el-input v-model="dialogFormVisibleForm.speed" style="width: 214px;" placeholder="请输入速率"></el-input>
                </el-form-item>
                <el-form-item label="版本:" :label-width="formLabelWidth">
                    <el-input v-model="dialogFormVisibleForm.productVersion" style="width: 214px;"
                        placeholder="请输入版本"></el-input>
                </el-form-item>
                <el-form-item label="有效时长:" :label-width="formLabelWidth">
                    <el-select v-model="dialogFormVisibleForm.effectiveDuration" placeholder="请选择时长">
                        <el-option v-for="(item, index) in optionsTime" :key="index" :label="item.name"
                            :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="价格:" :label-width="formLabelWidth">
                    <el-input v-model="dialogFormVisibleForm.price" style="width: 214px;" placeholder="请输入价格"></el-input>
                </el-form-item>
                <el-form-item label="详细介绍:" :label-width="formLabelWidth">
                    <el-input v-model="dialogFormVisibleForm.content" style="width: 214px;"
                        placeholder="请输入详细介绍"></el-input>
                </el-form-item>
                <el-form-item label="折扣介绍:" :label-width="formLabelWidth">
                    <el-input v-model="dialogFormVisibleForm.discountContent" style="width: 214px;"
                        placeholder="请输入折扣介绍"></el-input>
                </el-form-item>
                <el-form-item label="关联门店:" :label-width="formLabelWidth">
                    <el-select v-model="dialogFormVisibleForm.businessId" placeholder="请选择门店">
                        <el-option v-for="(item, index) in optionsMd" :key="index" :label="item.businessName"
                            :value="item.id" />
                    </el-select>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogUpdata = false">取消</el-button>
                    <el-button type="primary" @click="updataList">
                        确定
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
  
<script setup>
import { ref, reactive, getCurrentInstance, watch } from 'vue'
import { Delete, Search } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
const { proxy } = getCurrentInstance();

const state = reactive({
    options: [
        { value: 1, label: '一个月' },
        { value: 3, label: '三个月' },
        { value: 6, label: '六个月' },
        { value: 12, label: '十二个月' },
    ],
    name: '',
    time: '',
    tableData: [
    ],
    page: 1,
    totalCount: 0,
    params: {
        effectiveDuration: '',
        time: ['', ''],
        startDate: '',
        endDate: '',
    }
})
const optionsTime = ref([
    { name: '一个月', value: 1 },
    { name: '三个月', value: 3 },
    { name: '六个月', value: 6 },
    { name: '十二个月', value: 12 },
])
const optionsMd = ref([])
const dialogFormVisibleForm = ref({})
const dialogAdd = ref(false)
const dialogUpdata = ref(false)
const getData = async (params) => {
    //json对象转formdata格式
  function jsonToFormData(config) {
    const formData = new FormData();
    //循环传入的值转换formData
    Object.keys(config).forEach((key) => {
      formData.append(key, config[key]);
    })
    return formData;
  }
  let fromdata = jsonToFormData({
        page: params, limit: 10,
        effectiveDuration: state.params.effectiveDuration,
        startDate: state.params.time[0],
        endDate: state.params.time[1],
    })
    let res = await proxy.$api.home.apppointsproductList(fromdata)
    state.tableData = res.page.list
    state.totalPage = res.page.totalCount
    let resMd = await proxy.$api.home.list({ page: 1, limit: 1000 })
    optionsMd.value = resMd.page.list
    console.log('');
}
getData(state.page)
const handleCurrentChange = (e) => {
    console.log('r', e);
    state.page = e
    getData(e)
}
const search = () => {
    getData(state.page)
}
const reast = () => {
    state.params = {
        effectiveDuration: '',
        time: ['', ''],
        startDate: '',
        endDate: '',
    }
    getData(state.page)
}
const addDialog = () => {
    dialogAdd.value = true
}
const addList = () => {
    proxy.$api.home.apppointsproductsave(dialogFormVisibleForm.value).then(res => {
        console.log('res');
        if (res) {
            dialogAdd.value = false
            console.log('dialogFormVisibleForm', dialogFormVisibleForm.value);
            state.page = 1
            getData(state.page)
        }
    })

}
const update = (e) => {
    dialogFormVisibleForm.value = e
    console.log('eeeee', e);
    dialogUpdata.value = true
}
const deleteRow = (e) => {
    ElMessageBox.confirm(
        '是否删除此门店以下所有信息?',
        '警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            proxy.$api.home.apppointsproductdelete([e.id]).then(res => {
                console.log('res', res);
                if (res) {
                    ElMessage({
                        type: 'success',
                        message: '成功',
                    })
                    state.page = 1
                    getData(state.page)
                }
            })

        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '已取消',
            })
        })

}
const updataList = () => {
    proxy.$api.home.apppointsproductupdate(dialogFormVisibleForm.value).then(res => {
        console.log('res', res);
        if (res) {
            dialogUpdata.value = false
            ElMessage({
                type: 'success',
                message: '成功',
            })
            getData(1)
        }
    })

}
watch(() => dialogAdd.value,
    () => {
        if (dialogAdd.value == false) {
            dialogFormVisibleForm.value = {}
        }
    })
watch(() => dialogUpdata.value,
    () => {
        if (dialogUpdata.value == false) {
            dialogFormVisibleForm.value = {}
        }
    })
</script>
  
<style lang="scss" scoped>
.configuredRule {
    padding: 20px;

    .search_detail {
        display: flex;

        .search {
            margin-right: 10px;
            display: flex;
            align-items: center;

            .span_name {
                width: 110px;
                font-size: 16px;
            }
        }
    }

    .card-main {
        margin-top: 20px;
        height: calc(100vh - 200px);
        position: relative;

        .pagination {
            margin-top: 10px;
            display: flex;
            justify-content: flex-end;
            text-align: right;
        }
    }
}
</style>